import {Layout, Nav, Button, Image} from '@douyinfe/semi-ui';
import {
    IconSun, IconMoon,
} from '@douyinfe/semi-icons';
import {
    IconDescriptions,IconFaq,IconTimePicker,IconJsonViewer,IconHeart,IconForm
} from '@douyinfe/semi-icons-lab';
import AppIcon from '/assets/icon.svg';
import {useEffect, useRef, useState} from "react";
import Introduction from "./pages/Introduction.tsx";
import Predict from "./pages/predict/Predict.tsx";
import {Route, Routes, useLocation} from "react-router-dom";
import AIChat from "./pages/ai/AIChat.tsx";
import Team from "./pages/team/Team.tsx";
import Update from "./pages/Update.tsx";
import HistoryPredict from "./pages/history/HistoryPredict.tsx";

const baseNavigation = [
    {itemKey: 'introduction', text: '说明', icon: <IconDescriptions size="large"/>},
    {itemKey: 'predict', text: '开始预测', icon: <IconForm size="large"/>},
    {
        itemKey: 'ai',
        text: 'AI默语解码',
        icon: <IconFaq size="large"/>,

    },
    {itemKey: 'history', text: '历史预测', icon: <IconTimePicker size="large"/>},
    {itemKey: 'team', text: '开发团队', icon: <IconJsonViewer size="large"/>},
    {
        itemKey: 'update',
        text: '更新记录',
        icon: <IconHeart size="large"/>,
    },
]

const App = () => {
    //引入Layout相关组件
    const {Header, Sider, Content} = Layout;
    //记录当前的导航
    const [currentItem, setCurrentItem] = useState("")
    //更改UI黑夜/白天模式（从缓存中读取当前是dark还是light）
    const [darkMode, changeMode] = useState(localStorage.getItem("uiMode") == "dark")
    const body = document.body;
    if (darkMode) {
        body.setAttribute('theme-mode', 'dark');
    } else {
        body.removeAttribute('theme-mode');
    }

    const switchMode = () => {
        if (darkMode) {
            localStorage.setItem("uiMode", "light");
        } else {

            localStorage.setItem("uiMode", "dark");
        }
        changeMode(!darkMode)
    }

    const navRef = useRef(null);
    const setCollapse = () => {
        if (navRef.current) {
            (navRef.current as Nav)!.adapter.setIsCollapsed(true);
        }
    }
    //确保导航的正确运转
    const location = useLocation();
    const path = location.pathname.split('/').filter(item => item != '');

    useEffect(() => {
        //如果当前是初始页面的话就自动跳转到第一页
        if (path[0] == undefined) {
            window.location.href = baseNavigation[0].itemKey
        }
        setCurrentItem(path[0]);
    }, [location, path]);
    const changeToAIPage = () => {
        window.location.href = baseNavigation[2].itemKey
        setCurrentItem(path[2]);
    }
    const components = [
        <Introduction/>, <Predict changeToAIPageCall={changeToAIPage}/>,
        <AIChat isDarkMode={darkMode} setCollapse={setCollapse}/>,
        <HistoryPredict changeToAIPageCall={changeToAIPage}/>, <Team/>, <Update isDarkMode={darkMode}/>
    ]
    const navigation = baseNavigation.map((item,index) => ({
        ...item,
        component: components[index]
    }));
    return (
        <Layout style={{
            width: "100vw",
            height: "100vh",
            padding: 0,
        }}>
            {/*左侧导航栏*/}
            <Sider style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
                {/*导航*/}
                <Nav
                    ref={navRef}
                    defaultIsCollapsed={localStorage.getItem("collapsed") == "true"}
                    defaultSelectedKeys={[currentItem]}
                    style={{height: '100%'}}
                    header={{
                        logo: <Image src={AppIcon} width={36} height={36} />,
                        text: '默光先知',
                    }}
                    footer={{
                        collapseButton: true,
                    }}
                    onCollapseChange={(isCollapse) => {
                        localStorage.setItem("collapsed", isCollapse.toString())
                    }}
                >
                    {navigation.map((item) => (
                        <Nav.Item key={item.itemKey} itemKey={item.itemKey} text={item.text} icon={item.icon}
                                  link={"/" + item.itemKey}/>
                    ))}
                </Nav>
            </Sider>
            <Layout style={{scrollbarWidth: "none"}}>
                <Header style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
                    {/*上方工具栏*/}
                    <Nav
                        mode="horizontal"
                        footer={
                            <>
                                {/*切换UI模式*/}
                                <Button
                                    theme="borderless"
                                    icon={darkMode ? <IconMoon size="large"/> : <IconSun size="large"/>}
                                    style={{color: "var(--semi-color-text-2)", marginRight: "12px"}}
                                    onClick={switchMode}
                                />
                            </>
                        }
                    >
                    </Nav>
                </Header>
                {/*内容与导航*/}
                <Content style={{backgroundColor: 'var(--semi-color-bg-0)'}}>
                    <Routes>
                        {navigation.map((item, index) => (
                            <Route key={index} path={"/" + item.itemKey} element={item.component}/>
                        ))}
                    </Routes>
                </Content>
                {/*底部Footer*/}
            </Layout>
        </Layout>
    )
}
export default App